<template>
	<view class="add-account-book">

		<view class="content">
			<view class="account-book-name">
				<text>账本名称</text>
			</view>

			<uni-easyinput trim="all" v-model="form.name"></uni-easyinput>
			<view class="unload-image-title">
				<text>选择账本封面</text>
				<button @click="uploadImage" size="mini">上传</button>
			</view>

			<view v-for="(i,index) in form.accountBookFList" class="images">
				<text class="delete" @click="()=>deleteImg(index)">
					<uni-icons type="closeempty" size="14" color="#000"></uni-icons>
				</text>

				<image class="list-item-image" mode="aspectFill" :src="imgUrl+i.img"></image>

				<view class="defaulted" @click="()=>setDefault(i)">
					<uni-icons class="select-icon " :color="i.confirm=='1'?'#007aff' :'#000'"
						:type=" i.confirm=='1'?'checkbox-filled':'checkbox'" size="20"></uni-icons>
					<!-- <radio :checked="i.confirm=='1'" style="transform:scale(0.7)" /> -->
					<text> {{ /* i.confirm =='1'?"默认" : */'设为默认'}}</text>
				</view>
			</view>

			<view class="remark">
				<text>备注</text>
			</view>
			<uni-easyinput trim="all" type="textarea" v-model="form.remarks"></uni-easyinput>
		</view>
		<view class="save-btn " @click="save">
			<text class="save-btn-text">保存 </text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { requestAlbumPermission } from '@/utils/permission'; // 正确导入
	import { accountBookApi, notesApi, universalApi } from "@/apis/apis"
	import { userStore } from '@/store/user'
	const form = ref({
		id: null,
		name: '',
		sumPen: '',
		totalExpenditure: '',
		generalIncome: '',
		remarks: '',
		createTime: null,
		defaulted: null,
		accountBookFList: [],
		sequence: null
	})

	const pageType = ref('add')
	onLoad((options : any) => {
		if (options.edit) {
			pageType.value = options.edit

			// 逐个属性更新保持响应式
			Object.keys(form.value).forEach(key => {
				if (userStore.CurrentEditBook && userStore.CurrentEditBook[key] !== undefined) {
					form.value[key] = userStore.CurrentEditBook[key];
				}
			});


		} else if (options.defaulted == '1') {
			form.value.defaulted = '1'
		}
	})

	const deleteImg = (index : number) => {
		form.value.accountBookFList.splice(index, 1);
	}
	const setDefault = (i : any) => {
		console.log(i.confirm);
		if (i.confirm === '1') return
		form.value.accountBookFList.forEach((item) => {
			item.confirm = '0'
		})
		console.log(i.confirm);
		i.confirm = '1'
		console.log(i.confirm);
	}
	const imgUrl = 'http://192.168.3.200:8082/universal/img/'

	const uploadMultipleImages = async (tempPaths : any) => { console.log(tempPaths); }
	// 点击上传
	const uploadImage = () => {
		if (form.value.accountBookFList.length >= 3) return uni.showToast({ title: '最多上传3张', icon: 'error' });
		// 选择图片 -> 拷贝到私有目录 -> 上传
		uni.chooseImage({
			count: 5,
			sizeType: ['original'],
			success: async (res) => {
				const path = res.tempFilePaths[0];
				console.log("uploadImage:", res);
				const fileImg : any = await universalApi.uploadUsingPOST({}, path)

				form.value.accountBookFList.push({
					img: fileImg,
					confirm: '0'
				})


			}
		});
	}

	const save = async () => {
		const params = {
			...form.value
		}
		if (!params.name) return uni.showToast({ title: '请输入账本名称', icon: 'error' })

		for (var key in params) {
			if (params[key] === null || params[key] == '') delete params[key]
		}

		const res : any = await accountBookApi[pageType.value === 'edit' ? 'updateUsingPOST' : 'addUsingPOST'](params)
		console.log(res);
		if (res?.code === 200) {
			uni.showToast({ title: res.msg, icon: 'success' })
			uni.navigateBack()
		}
	}
</script>

<style lang="scss">
	.add-account-book {
		padding: 10px 20px;
		height: 100%;

		.content {

			.account-book-name,
			.unload-image-title,
			.remark {
				margin-top: 15px;
				margin-bottom: 15px;
			}

			.unload-image-title {
				width: 100%;
				display: flex;
				justify-content: space-between;
			}

			.images {
				width: 100%;
				position: relative;

				.list-item-image {
					width: 100%;
					height: 80px;
					margin-bottom: 10px;
				}

				.defaulted,
				.delete {
					right: 10px;
					position: absolute;
					font-size: 14px;

				}

				.defaulted {
					display: flex;
					align-items: center;
					bottom: 20px;
					color: #fff;

					.select-icon {
						margin-right: 5px;
					}
				}

				.delete {
					top: 10px;
					z-index: 999;
				}

			}
		}


	}
</style>